<template>
  <div class="value-table-root">
    <el-table
        :data="readOnly ? showList : [...showList,{mergeRow:true}]"
        border
        :span-method="arraySpanMethod"
        style="width: 100%">
      <el-table-column
          v-for="(item,index) in valueConfig"
          :prop="item.value"
          :label="item.label">
        <template slot-scope="scope">
          <div v-if="scope.row.mergeRow" class="handel-row">
            <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
          </div>
          <div v-else>
            <!--            <div v-if="scope.row.conType == CON_TYPE.OPERATE">-->
            <!--              <el-input-->
            <!--                  v-if="item.type=='input'"-->
            <!--                  v-model="scope.row[item.value]"-->
            <!--                  :placeholder="`请输入${item.label}`"-->
            <!--                  clearable-->
            <!--              >-->
            <!--              </el-input>-->
            <!--              <el-input-->
            <!--                  v-if="item.type=='number'"-->
            <!--                  type="number"-->
            <!--                  v-model="scope.row[item.value]"-->
            <!--                  :placeholder="`请输入${item.label}`"-->
            <!--                  clearable-->
            <!--              >-->
            <!--              </el-input>-->
            <!--            </div>-->
            <span>
              {{ scope.row[item.value] }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          v-if="!readOnly || isArr(btList)"
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              v-if="!readOnly"
              type="text"
              icon="el-icon-edit"
              @click="updateRow(scope.row)"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              v-if="!readOnly"
              icon="el-icon-delete"
              @click="removeRow(scope.row)"
          >删除
          </el-button>

          <div v-if="isArr(btList)">
            <el-button
                v-for="(item,index) in btList"
                :key="index"
                :size="item.size"
                type="text"
                :icon="item.icon"
                @click="clickFun(item,scope.row)"
            >{{item.label}}
            </el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="open" :width="dialogWidth" append-to-body>
      <div class="dia-body">
        <el-scrollbar>
          <el-form ref="form" :model="form" :label-width="dialogFormLabelWidth">
            <el-form-item v-for="(item,index) in valueConfig" :label="item.label" :prop="item.value">
              <el-input
                  v-if="item.type=='input'"
                  v-model="form[item.value]"
                  :placeholder="`请输入${item.label}`"
                  clearable
              >
              </el-input>
              <el-input
                  v-if="item.type=='number'"
                  type="number"
                  v-model="form[item.value]"
                  :placeholder="`请输入${item.label}`"
                  clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRow">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {isArr} from "@/utils/arrayUtil";
import guid from "@/utils/guid";
import {isArray} from "lodash";

export default {
  props: {
    btList: {
      type: Array
    },
    value: {
      type: Array,
      default: () => []
    },
    valueConfig: {
      type: Array
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    dialogWidth: {
      type: String,
      default: '530px'
    },
    dialogFormLabelWidth: {
      type: String,
      default: '100px'
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    const CON_TYPE = {
      SHOW: 'SHOW',
      OPERATE: 'OPERATE'
    }
    return {
      valueList: [],
      showList: [],
      CON_TYPE,
      open: false,
      form: {},
      title: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        if (!isArr(this.showList) && isArr(val)) {
          this.showList = val
        }
      },
      deep: true,
    },
    showList: {
      handler(val) {
        let res = isArr(val) ? _.cloneDeep(val).map(item => {
          delete item.conType
          delete item.rowId
          return item
        }) : []
        this.$emit('change', res)
      },
      deep: true,
    }
  },
  methods: {
    clickFun(item,data){
      this.$emit('clickFun',item,data)
    },
    isArr,
    cancel() {
      this.open = false
    },
    reset() {
      let rowItem = {};
      let {valueConfig, CON_TYPE} = this;
      valueConfig.forEach(rowConfig => {
        let {value} = rowConfig;
        rowItem[value] = null;
        rowItem.rowId = `row${guid()}`
      })
      this.form = rowItem;
    },
    handleAdd() {
      this.open = true;
      this.title = `添加数据`;
      this.reset();
    },
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      return [1, row?.mergeRow ? this.valueConfig.length + 1 : 1]
    },
    addRow() {
      let {form, CON_TYPE} = this;
      if (this.showList.length > 0) {
        this.showList[this.showList.length - 1].conType = CON_TYPE.SHOW
      }
      this.cancel()
      if (this.showList.some(item => item.rowId == form.rowId)) {
        this.showList = _.cloneDeep(this.showList).map(item => {
          item = item.rowId == form.rowId ? _.cloneDeep(form) : item
          return item
        });
      } else {
        this.showList.push(form)
      }
    },
    updateRow(row) {
      let {CON_TYPE} = this;
      row.conType = CON_TYPE.OPERATE
      this.form = _.cloneDeep(row);
      this.open = true
      this.title = `修改数据`;
    },
    removeRow(row) {
      let {rowId} = row
      this.showList = _.cloneDeep(this.showList).filter(item => item.rowId !== rowId)
    },
  },
  created() {
    this.valueList = this.value;
    if (!isArr(this.showList)) {
      let {CON_TYPE} = this
      this.showList = (isArr(this.value) ? this.value : []).map(item => {
        item.rowId = `row${guid()}`
        item.conType = CON_TYPE.SHOW;
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.value-table-root {
  .handel-row {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  ::v-deep .el-button {
    height: 32px;

    &.el-button--primary {
      background: $bt-color;
      border: none;
    }
  }
}
</style>
